import React from "react";
import {inject, observer} from "mobx-react";
import {observable} from 'mobx';
import {Button, Icon, message, Tabs} from "antd";
import {
  WeaCheckbox,
  WeaDatePicker,
  WeaDialog,
  WeaInput,
  WeaInputNumber,
  WeaLocaleProvider,
  WeaQrcode,
  WeaTextarea,
  WeaTimePicker,
  WeaTimeRangePicker,
  WeaSelect,
  WeaNewScroll,
} from "ecCom";
import CopyToClipboard from 'react-copy-to-clipboard';
import "./index.less";
import AddShareDialog from '../addShare';
import { repairDays, repairWeeks, repairDayTypes } from './types';
import classNames from 'classnames';

const getLabel = WeaLocaleProvider.getLabel;

const TabPane = Tabs.TabPane;

@inject('routing', 'edcPublishStore', 'edcAppStore', 'edcAppDesignerStore')
@observer
export default class PublishingDialog extends React.Component {
  @observable saving = false;
  @observable error = '';
  @observable selectKey = '1';
  @observable currApp;
  @observable hasRight = false;

  constructor(props) {
    super(props);
    this.store = this.props.edcPublishStore;
    this.onOk = this.onOk.bind(this);
    this.setWxVisible = this.setWxVisible.bind(this);

    const { publishApp: externalApp } = this.props.edcAppStore;
    const { app } = this.props.edcAppDesignerStore;
    const { publishApp } = this.props;
    const currApp = publishApp ? publishApp : app ? app : externalApp;
    this.currApp = currApp;
    this.hasRight = currApp.rightLevel == 2;
  }

  componentWillMount() {
    const { getSetInfo, getSubmissionAuthority, getFillinFrequency } = this.store;
	const { appid } = this.props;

    if(appid) {
      getSetInfo(appid);
      getSubmissionAuthority();
      getFillinFrequency();
    }
  }

  componentWillRecieveProps(nextProps) {
    const { getSetInfo } = this.store;

    if(nextProps.appid !== this.props.appid) {
      getSetInfo(nextProps.appid);
    }
  }

  onOk() {
    const { setUpdate } = this.store;
    const { onCancel } = this.props

    this.saving = true;

    if(this.validate()) {
      setUpdate().then(() => {
        this.saving = false;
        message.success(getLabel('502234', '设置成功'));
        onCancel();
      });
    } else {
      message.error(this.error);
      this.saving = false;
    }
  }

  validate() {
    const { publishSettings, wechatTypeInfo } = this.store;
    let isValidate = true;

    if(publishSettings.fillinEnabled.toString() === 'false') {
      return isValidate;
    }
    if(publishSettings.timeRangeEnabled.toString() === 'true') {
      if(publishSettings.startTime.length < 7 || publishSettings.endTime.length < 7) {
        isValidate = false;
        this.error = getLabel('502544','未设置开启/停止时间');
        return isValidate;
      }else{
        const startTime = publishSettings.startTime;
        const endTime = publishSettings.endTime;

        const timestamp1 = new Date(startTime).getTime();
        const timestamp2 = new Date(endTime).getTime();
        
        if (timestamp1 >= timestamp2) {
          isValidate = false;
          this.error = getLabel('505610', '开始时间不能大于结束时间！');
          return isValidate;
        }
      }
    }
    if(publishSettings.dataUpperLimitEnabled.toString() === 'true') {
      if(!publishSettings.dataUpperLimitCount) {
        isValidate = false;
        this.error = getLabel('502545','未设置数据量上限');
        return isValidate;
      }
    }
    if(publishSettings.dailyTimeRangeEnabled.toString() === 'true') {
      if(!publishSettings.dailyStartTime || !publishSettings.dailyEndTime) {
        isValidate = false;
        this.error = getLabel('502546','未设置每日开启时段');
        return isValidate;
      }else{
        const [hours1, min1] = publishSettings.dailyStartTime.split(":");
        const [hours2, min2] = publishSettings.dailyEndTime.split(":");
        const startDate = new Date();
        const endDate = new Date();

        startDate.setHours(hours1);
        startDate.setMinutes(min1);

        endDate.setHours(hours2);
        endDate.setMinutes(min2);

        if (startDate >= endDate) {
          isValidate = false;
          this.error = getLabel('505610', '开始时间不能大于结束时间！');
          return isValidate;
        }
      }
    }
    return isValidate;
  }

  tabClick(key){
    this.selectKey = key;
  }

  openPage(url) {
    window.open(url, "_blank");
  }

  onSetChange(key, value) {
    const {hasRight} = this;
    const { onSetChange } = this.store;
    hasRight && onSetChange(key, value);
  }

  uploadImg(e){
    const value = e.target.value;
    if(value){
      const { uploadImg } = this.store;
      const data = new FormData();

      data.append('image',e.target.files[0]);
      uploadImg(data);
    }
  }

  setWxVisible(value){
    this.wxVisible = value;
  }

  renderQrcode(url) {
    return <div className="item">
      <div>
        <div className="qrcode">
          <WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@a1ecij`}
            size={100}
            text={url}
          />
        </div>
        <p>{getLabel('502547','表单地址')}</p>
        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@hdb0b6`}
          value={url}
          disabled={true}
          style={{ width: "340px" }}
        />
        <CopyToClipboard ecId={`${this && this.props && this.props.ecId || ''}_CopyToClipboard@u5j57j`} text={url}
          onCopy={() => message.success(getLabel('502640','复制URL成功'))}
        >
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4pnjyx`}>{getLabel('502548','复制网址')}</Button>
        </CopyToClipboard>
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7tdi83`} onClick={() => this.openPage(url)}>{getLabel('502549','直接打开')}</Button>
      </div>
    </div>;
  }

  renderFill(publishSettings, submissionAuthority, fillinFrequency) {
    const {hasRight} = this;
    let isCustom = false;

    if (publishSettings.fillinFrequency === 'DAILY_REPEAT') {
      isCustom = publishSettings.makeUp && publishSettings.makeUp.day.range === 'custom'
    } else if (publishSettings.fillinFrequency === 'WEEK_REPEAT') {
      isCustom = publishSettings.makeUp && publishSettings.makeUp.week.range === 'custom'
    }

    const repairCls = classNames('publish-repair-config', {
      'repair-custom': isCustom
    })
    return <div className="item">
      <div className="title">{getLabel('502550','填写规则')}</div>
      <div className="fill">
        <p>{getLabel('502551','谁能填')}</p>
        {
          submissionAuthority.map((v, i) =>
            <div onClick={(e) => { e.preventDefault(); this.onSetChange('submissionAuthority', v.name) }} className={v.name === publishSettings.submissionAuthority ? 'active' : ''} style={{ display: "inline-block" }}>
              <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@4sa17k@${i}`}
                id={v.name}
                value={v.name === publishSettings.submissionAuthority ? '1' : '0'}
                content={v.face}
                viewAttr={hasRight ? 2 : 1}
              />
            </div>
		  )
        }
		{
			publishSettings.submissionAuthority === 'SPECIFIED_USER' ?
			<i className="icon-coms-Net-growth" onClick={this.store.showAddShareDialog}/> : null
		}
        <p>{getLabel('502552','填几次')}</p>
        {
          fillinFrequency.map((v, i) =>
            <div onClick={(e) => { e.preventDefault(); this.onSetChange('fillinFrequency', v.name) }} className={v.name === publishSettings.fillinFrequency ? 'active' : ''} style={{ display: "inline-block" }}>
              <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@yfinrw@${i}`}
                id={v.name}
                value={v.name === publishSettings.fillinFrequency ? '1' : '0'}
                content={v.face}
                viewAttr={hasRight ? 2 : 1}
              />
            </div>
          )
        }
      </div>
      <div style={{ paddingTop: 10 }}>
        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@i25i84`}
          id={'editEnabled'}
          value={publishSettings.editEnabled ? '1' : '0'}
          content={getLabel('511774','填表后允许填表人修改')}
          onChange={value => this.onSetChange('editEnabled', value)}
          helpfulTip={getLabel('511775','勾选开启该功能后，用户填写并提交的表单数据在再次进入表单时可以修改')}
          viewAttr={hasRight ? 2 : 1}
        />
      </div>
      {
        publishSettings.fillinFrequency === 'DAILY_REPEAT' ?
          <div style={{ paddingTop: 10 }}>
            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@i1owod`}
              value={publishSettings.makeUpEnable ? '1' : '0'}
              content={getLabel('519973', '允许填表人补交') }
              onChange={value => this.onSetChange('makeUpEnable', value)}
              helpfulTip={getLabel('519974', '当为每日/周限填一次时，是否允许填写人补交之前未填写的数据')}
              viewAttr={hasRight ? 2 : 1}
            />
            {
              publishSettings.makeUpEnable &&
              <div className={repairCls}>
                <label>{getLabel('519976', '允许补交时间范围')}</label>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@e0zu2u`}
                  value={publishSettings.makeUp.day.range || '0'}
                  options={repairDays()}
                  onChange={val => this.onSetChange('makeUp:day:range', val)}
                  helpfulTip={getLabel('519975', '当设置为x天/周内时，x不包含当天/周')}
                />
                {
                  publishSettings.makeUp.day.range === 'custom' &&
                  <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@2sohdl`}>
                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@p3p3d9`}
                      min={0}
                      value={publishSettings.makeUp.day.time}
                      onChange={val => this.onSetChange('makeUp:day:time', val)}
                    />
                    <label style={{ 'marginLeft': 10 }}>{getLabel('389054', '天内')}</label>
                  </React.Fragment>
                }
                <div className='repair-day-type'>
                  <label className='header'>{getLabel('519977', '补交时间计算方式')}</label>
                  <div className='content'>
                    {
                      repairDayTypes().map(dt => (
                        <div
                          onClick={(e) => { e.preventDefault(); this.onSetChange('makeUp:day:type', dt.key) }}
                          className={dt.key === (publishSettings.makeUp.day.type || '0') ? 'active' : ''}
                          style={{ display: "inline-block" }}
                        >
                          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@dla8gl@${dt.key}`}
                            id={dt.key}
                            value={dt.key === (publishSettings.makeUp.day.type || '0') ? '1' : '0'}
                            content={dt.showname}
                            viewAttr={hasRight ? 2 : 1}
                          />
                        </div>
                      ))
                    }
                  </div>
                </div>
              </div>
            }
          </div>
          : null
      }
      {
        publishSettings.fillinFrequency === 'WEEK_REPEAT' ? 
          <div style={{ paddingTop: 10 }}>
            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@10113z`}
              value={publishSettings.makeUpEnable ? '1' : '0'}
              content={getLabel('519973', '填表后允许填表人补交')}
              onChange={value => this.onSetChange('makeUpEnable', value)}
              helpfulTip={getLabel('519974', '当为每日/周限填一次时，是否允许填写人补交之前未填写的数据')}
              viewAttr={hasRight ? 2 : 1}
            />
            {
              publishSettings.makeUpEnable && 
              <div className={repairCls}>
                <label>{getLabel('519976', '允许补交时间范围')}</label>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@roq94a`}
                  value={publishSettings.makeUp.week.range || 'unlimit'}
                  options={repairWeeks()}
                  onChange={val => this.onSetChange('makeUp:week:range', val)}
                  helpfulTip={getLabel('519975', '当设置为x天/周内时，x不包含当天/周')}
                />
                {
                  publishSettings.makeUp.week.range === 'custom' &&
                  <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@pkxhyc`}>
                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@1bfl51`}
                      min={0}
                      value={publishSettings.makeUp.week.time}
                      onChange={val => this.onSetChange('makeUp:week:time', val)}
                    />
                    <label style={{ 'marginLeft': 10 }}>{getLabel('519978', '周内')}</label>
                  </React.Fragment>
                }
              </div>
            }
          </div>
          : null
      }
	  <AddShareDialog ecId={`${this && this.props && this.props.ecId || ''}_AddShareDialog@1y24ng`}
	  	appid={this.props.appid} 
		visible={this.store.addShareVisible}
		onCancel={this.store.hideAddShareDialog}
	  />
    </div>
  }

  renderForm(publishSettings) {
    const {hasRight} = this;
    return <div className="item">
      <div className="title">{getLabel('502553','表单开启/停止')}</div>
      <div className="form">
        <div className="fillOpen">
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@5fsdkb`}
            value={publishSettings.fillinEnabled ? '1' : '0'}
            display="switch"
            id="fillOpen"
            style={{ height: 20 }}
            onChange={value => this.onSetChange('fillinEnabled', value)}
            viewAttr={hasRight ? 2 : 1}
          />
          <span>{publishSettings.fillinEnabled ? getLabel('502554','已开启') : getLabel('502555','已关闭')}</span>
        </div>
        <div className={publishSettings.fillinEnabled ? '' : 'hide'}>
          <div>
            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@onsv1j`}
              id="openTime"
              content={getLabel('502556','设定开启/停止时间')}
              value={publishSettings.timeRangeEnabled ? '1' : '0'}
              onChange={value => this.onSetChange('timeRangeEnabled', value)}
              helpfulTip={getLabel('502557','此属性用于指定填写表单的具体时间范围，填写者只有在这个时间范围内填写，方可正常提交表单') }
              viewAttr={hasRight ? 2 : 1}
            />
            <div className={publishSettings.timeRangeEnabled ? 'form_item' : 'form_item hide'}>
              <p>{getLabel('502558','开始时间')}</p>
              <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@ivodi4`}
                value={publishSettings.startTime ? publishSettings.startTime.split(' ')[0] : ''}
                formatPattern={2}
                style={{ width: 140 }}
                onChange={value => this.onSetChange('startDate', value)}
                viewAttr={hasRight ? 2 : 1}
              />
              <WeaTimePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimePicker@1snbn4`}
                value={publishSettings.startTime ? publishSettings.startTime.split(' ')[1] : ''}
                formatPattern={3}
                style={{ width: 100 }}
                onChange={value => this.onSetChange('startTime', value)}
                viewAttr={hasRight ? 2 : 1}
              />
              <p>{getLabel('502559','停止时间')}</p>
              <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@2hcsib`}
                value={publishSettings.endTime ? publishSettings.endTime.split(' ')[0] : ''}
                formatPattern={2}
                style={{ width: 140 }}
                onChange={value => this.onSetChange('endDate', value)}
                viewAttr={hasRight ? 2 : 1}
              />
              <WeaTimePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimePicker@6c3g15`}
                value={publishSettings.endTime ? publishSettings.endTime.split(' ')[1] : ''}
                formatPattern={3}
                style={{ width: 100 }}
                onChange={value => this.onSetChange('endTime', value)}
                viewAttr={hasRight ? 2 : 1}
              />
            </div>
          </div>
          <div>
            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@n33ory`}
              id="dataUpperLimit"
              value={publishSettings.dataUpperLimitEnabled ? '1' : '0'}
              content={getLabel('502587','设定数据量上限')}
              onChange={value => this.onSetChange('dataUpperLimitEnabled', value)}
              helpfulTip={getLabel('502588','此属性用于限制该表单总提交数据量。当数据量达到限额时，该表单将不能继续提交数据。')}
              viewAttr={hasRight ? 2 : 1}
            />
            <div className={publishSettings.dataUpperLimitEnabled ? 'form_item' : 'form_item hide'} style={{ lineHeight: "30px" }}>
              {getLabel('502589','最多接受')}
                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@88k04x`}
                value={publishSettings.dataUpperLimitCount ? publishSettings.dataUpperLimitCount : ''} min="1"
                style={{ width: 80, margin: "0 4px" }}
                onChange={value => this.onSetChange('dataUpperLimitCount', value)}
                viewAttr={hasRight ? 2 : 1}
              />
              {getLabel('502590','条数据')}
                  </div>
          </div>
          <div>
            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@e5fazy`}
              id="dailyTimeRang"
              value={publishSettings.dailyTimeRangeEnabled ? '1' : '0'}
              content={getLabel('502591','设定每日开启时段')}
              onChange={value => this.onSetChange('dailyTimeRangeEnabled', value)}
              helpfulTip={getLabel('502592','此属性用于限制表单每天允许填写的时间段，填写者只有在每天这个时间段内填写，方可正常提交数据。')}
              viewAttr={hasRight ? 2 : 1}
            />
            <div className={publishSettings.dailyTimeRangeEnabled ? 'form_item' : 'form_item hide'}>
              <WeaTimeRangePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimeRangePicker@ue01lc`}
                value={[
                  publishSettings.dailyStartTime ? publishSettings.dailyStartTime : '',
                  publishSettings.dailyEndTime ? publishSettings.dailyEndTime : '',
                ]}
                onChange={value => { this.onSetChange('dailyStartTime', value[0]); this.onSetChange('dailyEndTime', value[1]); }}
                viewAttr={hasRight ? 2 : 1}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  }

  renderWeChat(url){
    const { imgList, diyImg, isLoading, setWechat, wechatSettings } = this.store;
    const {currApp, hasRight} = this;

    return <div className={`setting-wechat ${this.selectKey!=='2'?'hide':''}`}>
            <div className="clearfix">
              <div className="setting-left">
                <p>{getLabel('502596','微信分享标题')}</p>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@o98r6o`}
                  value={wechatSettings.title || currApp.name}
                  placeholder={currApp.name}
                  onChange={value => {
                    setWechat('title', value)
                  }}
                  viewAttr={hasRight ? 2 : 1}
                />
                <p className="we-share-desc">{getLabel('502597','微信分享描述')}</p>
                <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@2qcddv`}
                  value={wechatSettings.description || ''}
                  minRows={3}
                  maxRows={3}
                  onChange={value => {
                    setWechat('description', value)
                  }}
                  viewAttr={hasRight ? 2 : 1}
                />
              </div>
              <div className="setting-right">
                <p>{getLabel('502598','微信消息预览')}</p>
                <div className="mes-pre">
                  <img className="we-bg" src="/edc/images/wechat-message.png"></img>
                  <img className="pre-icon" src={wechatSettings.imgUrl}></img>
                  <span className="we-title">{wechatSettings.title?wechatSettings.title:currApp.name}</span>
                  <div className="we-desc">{wechatSettings.description || ''}</div>
                </div>
              </div>
            </div>
            <div className="clearfix">
              <div className="setting-left">
                <p>{getLabel('502599','自定义图标')}</p>
                <img className="diy-icon" src={wechatSettings.imgUrl}></img>
                {isLoading && <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@x1b9qw`} type="loading" />}
                {hasRight &&
                  <span className="upload-icon">
                      {getLabel('502600','上传自定义图标')}
                    <input type="file" onChange={this.uploadImg.bind(this)} accept=".jpg,.gif,.png,.jpeg"></input>
                  </span>
                }
                {hasRight &&
                  <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@pz979j`}  className="icon-wrap">
                    {
                      diyImg &&
                      <span
                        className={`we-icon ${wechatSettings.imgUrl===diyImg?'active':''}`}
                        onClick={()=> setWechat('imgUrl', diyImg)}
                      >
                        <img className="diy-icon" src={diyImg}></img>
                      </span>
                    }
                    {
                      imgList.map(url => (
                        <span
                          className={`we-icon ${wechatSettings.imgUrl===url?'active':''}`}
                          onClick={()=> setWechat('imgUrl', url)}
                        >
                          <img className="diy-icon" src={url}></img>
                        </span>
                      ))
                    }
                  </WeaNewScroll>
                }
              </div>
              <div className="setting-right">
                <p>{getLabel('502601','朋友圈预览')}</p>
                <div className="friend-pre">
                  <img className="we-bg" src="/edc/images/wechat-friend.png"></img>
                  <img className="pre-icon" src={wechatSettings.imgUrl}></img>
                  <span className="we-title">{wechatSettings.title?wechatSettings.title:currApp.name}</span>
                </div>
              </div>
            </div>
            <div className='we-code clearfix'>
              <div className="we-qrcode">
                <WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@c2lskx`}
                  size={100}
                  text={url}
                />
              </div>
              <div className="we-tip-desc">
                <p>{getLabel('502602','如果分享设置完成')}</p>
                <p>{getLabel('502603','你可以扫描二维码将表单分享至微信')}</p>
              </div>
            </div>
          </div>;
  }

  render() {
    const { visible, onCancel } = this.props;
    const { publishSettings, submissionAuthority, fillinFrequency,
       shortkey, isCreate,
    } = this.store;
    const {hasRight} = this;

    const buttons = hasRight ? [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@i74dxv@onok`} type='primary' loading={this.saving} onClick={this.onOk} disabled={isCreate}>{getLabel('502604','保存设置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jc3d0v@cancel`} type='ghost' onClick={onCancel}>{getLabel(31129,'取消')}</Button>
    ] :
      [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@p0nxd3@cancel`} type='ghost' onClick={onCancel}>{getLabel(31129,'取消')}</Button>];
    const url = `${location.origin}/edc/formview/${shortkey}`;

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@buv6mj`}
        title={getLabel('502605','发布')}
        className='publish'
        icon={"icon-coms02-Data-center"}
        iconBgcolor = "#1a57a0"
        hasScroll
        confirmLoading={true}
        visible={visible}
        buttons={buttons}
        onCancel={onCancel}
        style={{ width: 600, height: 700 }}
      >
        <div className="setting-content">
          <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@w7upkh`} defaultActiveKey={this.selectKey} onChange={this.tabClick.bind(this)}>
            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@92u816`} tab={getLabel('502606','链接和二维码')} key="1">
            </TabPane>
            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@k1j44r`} tab={getLabel('502607','发布到微信')} key="2">
            </TabPane>
          </Tabs>
          <div className={`setting-url-code ${this.selectKey!=='1'?'hide':''}`}>
            {this.renderQrcode(url)}
            {this.renderFill(publishSettings, submissionAuthority, fillinFrequency)}
            {this.renderForm(publishSettings)}
          </div>
          {this.renderWeChat(url)}
        </div>
      </WeaDialog>
    );
  }
}
